<!DOCTYPE html>
<html style="width:100%;height:100%;">
<style>
    .tablet {
    justify-content:space-around;
    display:flex;
    margin-left:130px;
    margin-right:130px;
    margin-top:90px;
    flex-wrap: wrap
    }
    .searchArea {
    min-width: 300px;
    font-size: 1.9rem;
    position: relative;
    height: 53px;
    margin: 0 auto;
    box-shadow: 0 4px 10px rgb(0 0 0 / 10%);
    width: 64%;
    margin-top: 8%;
    z-index: 4;
    }
    .searchFirm {
    width: 33px;
    height: 33px;
    float: left;
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
    position: absolute;
    left: 10px;
    z-index: 2;
    }
    .searchFirmIcon {
    width: 20px;
    height: 20px;
    margin: 16px auto ;
    cursor: pointer;
    background-position: 24px -24px;
    background-size: 20px;
    background-repeat: no-repeat;
    }
    .sfBaidu {
    background-position: 0 -40px;
    }

    #searchCon {
    height: 100%;
    background: transparent;
    float: left;
    border: none;
    margin: 0 33px 0 0;
    width: calc(100% - 80px);
    font-size: 18px;
    z-index: 2;
    position: absolute;
    right: 0;
    outline: none;
    }
</style>
<script>
    function initPad() {
    this.isPhone = false;
    func1();
    }
    function adapterDevice() {
    console.info('function adapterDevice');
    let v = document.querySelector('meta[name="viewport"]');
    if (v) {
    v.setAttribute('content', 'width=720, user-scalable=yes');
    } else {
    let m = document.createElement('meta');
    m.content = 'width=720, user-scalable=yes';
    m.name = 'viewport';
    document.getElementsByTagName('head')[0].appendChild(m);
    }
    }
    function func1() {
    let array = [{src: './worldclock_fill_2.png', name:'必应', addr: 'bing.com'},
    {src: './worldclock_fill_2.png', name: '12306', addr: 'www.12306.cn'},
    {src: './worldclock_fill_2.png', name: '大众点评', addr:'www.dianping.com'},
    {src: './worldclock_fill_2.png', name: '新浪新闻', addr:'news.sina.com.cn/'},
    {src: './worldclock_fill_2.png', name: '京东', addr:'www.jd.com'},
    {src: './worldclock_fill_2.png', name: '拼多多', addr:'www.pinduoduo.com'},
    {src: './worldclock_fill_2.png', name:'微博', addr: 'weibo.com/'},
    {src: './worldclock_fill_2.png', name:'淘宝', addr: 'www.tmall.com'},
    {src: './worldclock_fill_2.png', name:'唯品会', addr:'www.vip.com'},
    {src: './worldclock_fill_2.png', name:'微信阅读', addr:'weread.qq.com'},
    {src: './worldclock_fill_2.png', name:'知乎', addr:'www.zhihu.com'},
    {src: './worldclock_fill_2.png', name:'携程', addr:'www.ctrip.com'},]
    let div = document.getElementById('test');
    div.className = isPhone ? 'phone' : 'tablet'
    for(let i = 0; i < array.length; i++) {
    let box = document.createElement('div');
    box.style.display = 'flex';
    box.style.flexDirection = 'column';
    box.style.justifyContent = 'center';
    box.style.alignItems = 'center';
    box.style.height = '120px';
    box.style.minWidth = '100px';
    box.style.borderRadius = '15px';
    box.addEventListener('touchstart', function(e){
    box.style.backgroundColor = '#e4e4e4';
    });
    box.addEventListener('touchend', function(e){
    box.style.backgroundColor = '#00000000';
    });
    let text = document.createElement('p');
    text.innerHTML = array[i].name;
    text.style.fontSize = '13px';
    text.style.fontWeight = 400;
    let image = new Image();
    image.src = array[i].src;
    image.style.width = '48px';
    image.style.height = '48px';
    image.onclick = function() {
    console.info('image.onclick');
    etsObj.test(array[i].addr);
    }
    box.appendChild(image);
    box.appendChild(text);
    div.appendChild(box);
    }
    }
    function uploadWord() {
    let inputDom = document.getElementById('searchCon');
    console.info(`pad inputDom.value=${inputDom.value}`);
    etsObj.searchWord(inputDom.value);
    }

    function searchWord(e) {
    console.info(`searchWord keyCode=${e.keyCode}`);
    if (e.keyCode === 13) {
    let inputDom = document.getElementById('searchCon');
    console.info(`phone inputDom.value=${inputDom.value}`);
    etsObj.searchWord(inputDom.value);
    return true;
    }
    return false;
    }
</script>
<body style="margin：0px; background-image: url(./backgroundImg.jpg);
background-size:cover;height:98% padding-bottom:60px" onload="initPad()">
<div style="display:flex;flex-direction:column;width:100%;padding-bottom:60px">
    <div class="searchArea" style="border-radius: 20px; display: block; background-color: rgba(255, 255, 255, 0.7);flex-shrink: 0;">
        <div class="searchFirm" style="border-bottom-left-radius: 8px; border-top-left-radius: 8px;">
            <div class="searchFirmIcon sfBaidu" style="background-image: url(./all.png);">
            </div>
        </div>
        <form autocomplete="off">
            <input id="searchCon" type="text" style="border-bottom-right-radius: 8px;
border-top-right-radius: 8px; text-align: left;" onkeyup="searchWord(event)"
                   onkeypress="return event.keyCode !== 13;">
        </form>
        <div style="display:flex;height: 100%; width: 33px;position: absolute; right:9px; z-index: 3;
align-items: center;justify-content: center;" onclick="uploadWord()">
            <img src="./search.svg" style="width: 20px; height: 20px;">
        </div>
    </div>
    <div id = "test"></div>
</div>
</body >
</html>